一、reactive基本概念
reactive是Vue3.0中新增的一个API，它可以使得对象变成响应式的，即当对象中的属性发生变化时，视图会自动更新。

二、reactive的使用
1.为对象或数组添加响应式特性
2.直接访问或修改对象或数组的属性
3.在模板中使用对象或数组的属性
4.在计算属性或方法中返回对象或数组的属性
5.仅支持对象和数组，不支持其他类型

三、reactive的原理
reactive的原理是通过Object.defineProperty()方法来实现的。

四、示例
<!--import { reactive } from 'vue';-->
<!--const state = reactive({-->
<!--count: 0,-->
<!--user: { name: 'Alice', age: 25 }-->
<!--});-->
<!--state.count = 1; // 直接修改属性-->
<!--state.user.name = 'Bob'; // 修改嵌套属性-->

五、reactive与ref的核心区别
特性	        ref                       	   reactive
数据类型	    支持所有类型                    	仅对象类型（对象、数组等）
访问方式   	通过 .value（模板自动解包）	      直接访问属性
原理	        包装对象，内部用 value 属性       	Proxy 代理整个对象
TS类型定义	  需显式泛型（如 ref<number />）     自动推断类型
替换整个对象	可直接赋值（xxx.value = {}）	    需保持引用不变
解构响应性 	需toRefs保持响应性             	  直接解构会丢失响应性

六、使用场景
1.ref 更适用于：
基本类型数据（字符串、数字、布尔值）。
需要重新赋值整个对象的情况（如替换一个配置对象）。
需要将响应式数据传递给函数或组件时（因 ref 有固定引用）。

2.reactive 更适用于：
复杂对象或嵌套数据（如表单数据、组件状态对象）。
需要直接操作属性且不需要替换整个对象的情况。


七、代码对比示例
<!--// 使用 ref-->
<!--const countRef = ref(0);-->
<!--const userRef = ref({ name: 'Alice' });-->
<!--userRef.value.name = 'Bob'; // 需要 .value-->
<!--// 使用 reactive-->
<!--const state = reactive({ count: 0, user: { name: 'Alice' } });-->
<!--state.user.name = 'Bob'; // 直接修改-->
<!--<script setup lang="ts">-->
<!--</script>-->

八、注意事项
1、 自动解包：在模板或 reactive 对象中，ref 会自动解包：
<!--const count = ref(0);-->
<!--const state = reactive({ count }); // state.count 直接访问，无需 .value-->

2、响应性丢失：解构 reactive 对象会失去响应性，需用 toRefs：
<!--const state = reactive({ count: 0 });-->
<!--const { count } = toRefs(state); // 保持响应性-->

3、性能差异：reactive 在大型对象上更高效，ref 更适合独立值的跟踪。

九、总结
(1).优先使用 ref 处理基本类型或需要灵活替换的简单对象。
(2).优先使用 reactive 处理复杂嵌套对象，避免频繁使用 .value。
(3).两者可混合使用（如用 reactive 包裹多个 ref）。